<!-- v-for -->
<template>

<div>
  <ul>
    <!-- 无key的 遍历数组-->
    <li v-for="(item, index) in arr">{{ item }} => {{ index }}</li>
    <hr>
    <!-- 有key -->
    <li v-for="(item, index) in arr" :key="index">{{ item }} => {{ index }}</li>
  </ul>
  <ul>
    <!-- 无key的  遍历对象-->
    <li v-for="(item, key, index) in obj">{{ item }} => {{ key }} => {{ index }}</li>
    <hr>
    <!-- 有key -->
    <li v-for="(item, key, index) in obj" :key="index">{{ item }} => {{ key }} => {{ index }}</li>
  </ul>
  <ul>
    <!-- 无key的  遍历数字-->
   <li v-for="(item, index) in 5">{{ item }} => {{ index }}</li>
   <hr>
   <!-- 有key -->
   <li v-for="(item, index) in 5" :key="index">{{ item }} => {{ index }}</li>
  </ul>
</div>

<hr>
<div>
  <ul>
    <!-- 有key -->
     <!-- 1. key 的类型只能是 数字 或 字符串  2. key 的值必须 唯⼀, 不能重复 -->
    <li v-for="(item, index) in bookList" 
    :key="item.id">
      <span>{{ item.bookName }}</span>
      <span>{{ item.author }}</span>
      <button @click="del(index)">删除</button>
    </li>
  </ul>
  <!-- key="item.id" -->
</div>


</template>

<script setup>
  import { ref } from 'vue';      
    const arr = ref([11, 22, 33, 44])

  import { reactive } from 'vue';
    const bookList = reactive([
      {id:1, bookName:'红楼梦', author:'曹雪芹'},
      {id:2, bookName:'三国演义', author:'罗贯中'},
      {id:3, bookName:'水浒传', author:'曹雪芹'},
      {id:4, bookName:'西游记', author:'吴承恩'}
    ])
    // bookList本质是数组，其中每个元素都是一个对象
  const obj = reactive({
    id:1,
    bookName:'红楼梦', 
    author:'曹雪芹'
  })

  // 	// 删除
	// const onDel = (i) => {
	// 	// i: 当前点击的下标

	// 	// 删除前先确认
	// 	if (window.confirm('确定删除么?')) {
	// 		// 调用 splice 进行删除
	// 		bookList.value.splice(i, 1)
  //    //使用ref定义bookList数组需要用.value访问数组中的内容
	// 	}
	// }

  //删除
  //先获取删除元素的下标
  const del = (i) =>{
    //判断是否删除该元素
    if(window.confirm('确定是否删除'))
      bookList.splice(i,1)
  }
  

</script>

<style>

  ul li{
    display: flex;
    justify-content: space-around;
    padding: 20px;
    /* border-bottom: 3px solid black; */
  }

</style>